<template>
  <div style="position: relative">
    <div class="box">
      <template v-if="limitedHeadPortraits.length">
        <div
          class="subbox"
          v-for="(src, index) in limitedHeadPortraits"
          :key="index"
        >
          <!-- <img v-if="src" class="img" :src="src" /> -->
          <a-avatar
            :image-url="src"
            v:style="{ backgroundColor: backgroundColor }"
            >{{ customSubstring(name as string) || '暂无' }}</a-avatar
          >
        </div>
      </template>
      <div v-else class="subbox">
        <a-avatar
          :image-url="limitedHeadPortraits[0]"
          :style="{ backgroundColor: backgroundColor }"
        >
          {{ customSubstring(name as string) || '暂无' }}
        </a-avatar>
      </div>
    </div>
    <a-badge v-if="number" class="badge" :count="number" />
  </div>
</template>

<script setup lang="ts">
const props = withDefaults(
  // 参数说明
  defineProps<{
    headPortraits?: string | string[]; //个人头像和群头像
    number?: number;
    name?: string;
    backgroundColor?: string;
  }>(),
  {
    backgroundColor: '#0089ff'
  }
);

const MAX_IMAGES = 9;

const limitedHeadPortraits = computed(() => {
  if (Array.isArray(props.headPortraits)) {
    return props.headPortraits.slice(0, MAX_IMAGES);
  } else if (typeof props.headPortraits === 'string') {
    return [props.headPortraits];
  } else {
    return [];
  }
});
function customSubstring(str: string) {
  if (str.length <= 2) {
    return str; // 字符串长度小于等于两位，不做任何操作，直接返回原字符串
  }

  // 判断字符串第一个字符是否是中文
  const isChinese = /^[\u4e00-\u9fa5]+$/.test(str[0]);

  if (isChinese) {
    return str.substring(str.length - 2); // 中文截取后两位
  } else {
    return str.substring(0, 2); // 英文截取前两位
  }
}
</script>

<style lang="less" scoped>
.box {
  position: relative;
  width: 48px; /* 假定白框展示为宽高 300*300 */
  height: 48px;
  box-sizing: border-box;
  display: flex; /* 设定flex布局，主轴次轴居中对齐，允许换行 */
  justify-content: center;
  align-items: center;
  align-content: center; /* 设定包含的元素换行时，多个轴线居中对齐 */
  flex-flow: row wrap;
  overflow: hidden;

  .subbox {
    position: relative;
    box-sizing: border-box;
    width: 50%; /* 设定元素元素默认为父元素宽的50% */

    .img {
      /* 设定头像占满父元素，即头像宽高也相等 */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 1px solid #ccc;
      object-fit: cover;
    }
  }

  /* ↓↓↓ 以下为具体不同头像个数的匹配样式 ↓↓↓ */

  /* 只有一个 占100%父元素宽*/
  .subbox:only-child {
    width: 100%;
  }

  /* 只有两个 占50%父元素宽，且呈对角线分布*/
  .subbox:nth-child(1):nth-last-child(2) {
    margin-right: 50%;
  }
  .subbox:nth-child(2):nth-last-child(1) {
    margin-left: 50%;
  }

  /* 只有三个 占33.3%父元素宽，且呈上一下二分布*/
  .subbox:nth-child(1):nth-last-child(3) {
    margin: 0 25%;
  }

  /* 五六七八九个宽都是父元素宽的 1/3 */
  .subbox:nth-child(1):nth-last-child(5),
  .subbox:nth-child(1):nth-last-child(5) ~ .subbox,
  .subbox:nth-child(1):nth-last-child(6),
  .subbox:nth-child(1):nth-last-child(6) ~ .subbox,
  .subbox:nth-child(1):nth-last-child(7),
  .subbox:nth-child(1):nth-last-child(7) ~ .subbox,
  .subbox:nth-child(1):nth-last-child(8),
  .subbox:nth-child(1):nth-last-child(8) ~ .subbox,
  .subbox:nth-child(1):nth-last-child(9),
  .subbox:nth-child(1):nth-last-child(9) ~ .subbox {
    width: 33.3%;
  }

  /* 五个、八个 */
  .subbox:nth-child(1):nth-last-child(5),
  .subbox:nth-child(1):nth-last-child(8) {
    margin-left: 15%;
  }
  .subbox:nth-child(2):nth-last-child(4),
  .subbox:nth-child(2):nth-last-child(7) {
    margin-right: 15%;
  }

  /* 七个 */
  .subbox:nth-child(1):nth-last-child(7) {
    margin: 0 33.3%;
  }

  // .subbox:before {
  //   /* 设定元素为宽高相等 */
  //   content: '';
  //   display: block;
  //   padding-top: 100%;
  // }
}
.badge {
  position: absolute;
  top: -10px;
  right: -8px;
}
</style>
